<template>
  <div class="home-container">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <div class="search-input-wrapper">
        <span class="search-icon">🔍</span>
        <input
          type="text"
          placeholder="搜索商品"
          class="search-input"
        />
      </div>
    </div>

    <!-- 轮播图区域 -->
    <div class="carousel-container">
      <div
        ref="carousel"
        class="carousel"
        @mouseenter="stopCarousel"
        @mouseleave="startCarousel"
      >
        <div
          class="carousel-track"
          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        >
          <div
            v-for="(item, index) in carouselItems"
            :key="index"
            class="carousel-item"
          >
            <div class="carousel-content">
              <img
                :src="item.img"
                :alt="item.text"
                class="carousel-image"
              />
              <div class="carousel-text">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
          <span
            v-for="(item, index) in carouselItems"
            :key="index"
            class="indicator"
            :class="{ active: index === currentIndex }"
            @click="goToSlide(index)"
          />
        </div>
      </div>
    </div>

    <!-- 商品分类区域 -->
    <div class="categories-section">
      <div
        v-for="category in categories"
        :key="category.id"
        class="category-item"
      >
        <div class="category-icon">
          {{ category.icon }}
        </div>
        <div class="category-name">
          {{ category.name }}
        </div>
      </div>
    </div>

    <!-- 猜你喜欢区域 -->
    <div class="recommendations-section">
      <h2 class="section-title">猜你喜欢</h2>
      <div class="recommendations-grid">
        <div
          v-for="(product, index) in recommendedProducts"
          :key="product.id"
          class="product-card"
        >
          <div class="product-image">
            <img
              :src="product.img"
              :alt="product.name"
              class="product-image-img"
            />
          </div>
          <div class="product-info">
            <h3 class="product-name">
              {{ product.name }}
            </h3>
            <div class="product-price">¥{{ product.price }}</div>
            <div class="product-rating">
              <span class="stars">★★★★★</span>
              <span class="rating-count">({{ product.reviews }})</span>
            </div>
            <button class="add-to-cart">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 轮播图数据 - 使用国内稳定的图片服务
const carouselItems = [
  {
    img: 'https://img.alicdn.com/imgextra/i3/O1CN01gVgZ6T1v3h0uL1H5d_!!6000000006240-0-picassoopen.jpg',
    text: '限时优惠',
  },
  {
    img: 'https://img.alicdn.com/imgextra/i1/O1CN01BZJZQa1p8k2XjXj2F_!!6000000005597-0-picassoopen.jpg',
    text: '新品首发',
  },
  {
    img: 'https://img.alicdn.com/imgextra/i4/O1CN01sVh40K1o0K9P6U4V7_!!6000000005486-0-picassoopen.jpg',
    text: '爆款推荐',
  },
  {
    img: 'https://img.alicdn.com/imgextra/i2/O1CN01oOZx2w1hZcQ1VYl09_!!6000000004382-0-picassoopen.jpg',
    text: '会员专享',
  },
  {
    img: 'https://img.alicdn.com/imgextra/i3/O1CN01716tF31rRKrVtN6Hd_!!6000000005970-0-picassoopen.jpg',
    text: '满减活动',
  },
  {
    img: 'https://img.alicdn.com/imgextra/i2/O1CN011nqI5Y1Fb3P6K2q9e_!!6000000000941-0-picassoopen.jpg',
    text: '品牌特惠',
  },
]

// 商品分类数据
const categories = [
  { id: 1, icon: '🚀', name: '新品首发' },
  { id: 2, icon: '🏠', name: '居家生活' },
  { id: 3, icon: '👕', name: '服饰鞋包' },
  { id: 4, icon: '🍱', name: '美食酒水' },
  { id: 5, icon: '🧴', name: '个护清洁' },
  { id: 6, icon: '👶', name: '母婴亲子' },
  { id: 7, icon: '🏃', name: '运动旅行' },
  { id: 8, icon: '🎮', name: '数码家电' },
  { id: 9, icon: '🐶', name: '宠物生活' },
  { id: 10, icon: '✨', name: '每日优选' },
]

// 推荐商品数据
const recommendedProducts = [
  {
    id: 1,
    name: '智能手环 心率监测 多功能运动计步器',
    price: '129.90',
    reviews: 1234,
    img: 'https://img.alicdn.com/imgextra/i4/O1CN018u9Vg11FzQ2Z6dVNh_!!6000000000576-0-picassoopen.jpg',
  },
  {
    id: 2,
    name: '纯棉舒适T恤 透气宽松 多色可选',
    price: '79.90',
    reviews: 876,
    img: 'https://img.alicdn.com/imgextra/i4/O1CN01wW3dOv1mC4wH2jK6O_!!6000000004487-0-picassoopen.jpg',
  },
  {
    id: 3,
    name: '便携式榨汁机 随行杯 充电式',
    price: '99.90',
    reviews: 543,
    img: 'https://img.alicdn.com/imgextra/i4/O1CN01p2g3Ic1zR9qD1t8Vb_!!6000000006297-0-picassoopen.jpg',
  },
  {
    id: 4,
    name: '无线蓝牙耳机 降噪长续航',
    price: '199.90',
    reviews: 2109,
    img: 'https://img.alicdn.com/imgextra/i1/O1CN01Vn0Lr91Sq5KzWJ5kG_!!6000000002717-0-picassoopen.jpg',
  },
  {
    id: 5,
    name: '北欧风简约抱枕套 沙发靠垫',
    price: '49.90',
    reviews: 321,
    img: 'https://img.alicdn.com/imgextra/i1/O1CN01zR4r3e1XtRj0l6MpA_!!6000000002482-0-picassoopen.jpg',
  },
  {
    id: 6,
    name: '天然有机护肤套装 温和不刺激',
    price: '299.90',
    reviews: 789,
    img: 'https://img.alicdn.com/imgextra/i2/O1CN01oX0X5x1fSfY4R1QyJ_!!6000000003728-0-picassoopen.jpg',
  },
]

// 轮播图状态和方法
const carousel = ref(null)
const currentIndex = ref(0)
let carouselInterval = null

// 轮播图自动播放
const startCarousel = () => {
  carouselInterval = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % carouselItems.length
  }, 3000)
}

// 停止轮播图
const stopCarousel = () => {
  if (carouselInterval) {
    clearInterval(carouselInterval)
  }
}

// 跳转到指定轮播图
const goToSlide = index => {
  currentIndex.value = index
}

// 生命周期钩子
onMounted(() => {
  startCarousel()
})

onUnmounted(() => {
  stopCarousel()
})
</script>

<style scoped lang="less">
@import (reference) '../../styles/global.less';

.home-container {
  min-height: 100vh;
  background-color: @background-color;
}

/* 搜索栏样式 */
.search-bar {
  padding: 15px;
  background-color: @white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: @box-shadow;

  .search-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 8px 15px;

    .search-icon {
      margin-right: 8px;
      color: @text-color-tertiary;
    }

    .search-input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-size: @font-size-sm;
    }
  }
}

/* 轮播图样式 */
.carousel-container {
  background-color: @white;
  padding: 10px;
  overflow: hidden;

  .carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 375/200;
    overflow: hidden;
    border-radius: 10px;

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 100%;
    }

    .carousel-item {
      flex: 0 0 100%;
      height: 100%;

      .carousel-content {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 10px;
        overflow: hidden;

        .carousel-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .carousel-text {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          color: white;
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          padding: 10px 20px;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 4px;
        }
      }
    }

    .carousel-indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;

      .indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: all 0.3s ease;

        &.active {
          background-color: white;
          width: 20px;
          border-radius: 4px;
        }
      }
    }
  }
}

/* 商品分类样式 */
.categories-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  padding: 20px;
  background-color: @white;
  margin-top: 10px;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;

    .category-icon {
      font-size: 28px;
      margin-bottom: 8px;
    }

    .category-name {
      font-size: 12px;
      color: @text-color;
      text-align: center;
    }
  }
}

/* 猜你喜欢样式 */
.recommendations-section {
  margin-top: 10px;
  background-color: @white;
  padding: 20px 15px;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: @text-color;
  }

  .recommendations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    .product-card {
      background-color: @white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      &:hover {
        .product-image-img {
          transform: scale(1.05);
        }
      }

      .product-image {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;

        .product-image-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
      }

      .product-info {
        padding: 10px;

        .product-name {
          font-size: @font-size-sm;
          color: @text-color;
          margin-bottom: 8px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .product-price {
          font-size: 16px;
          font-weight: bold;
          color: @danger-color;
          margin-bottom: 5px;
        }

        .product-rating {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          font-size: 12px;

          .stars {
            color: #ffb400;
            margin-right: 5px;
          }

          .rating-count {
            color: @text-color-tertiary;
          }
        }

        .add-to-cart {
          width: 100%;
          padding: 8px;
          background-color: @success-color;
          color: @white;
          border: none;
          border-radius: 4px;
          font-size: @font-size-sm;
          cursor: pointer;
          transition: background-color 0.3s ease;

          &:hover {
            background-color: #73d13d;
          }
        }
      }
    }
  }
}
</style>
